<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"
    xmlns:fo="http://www.w3.org/1999/XSL/Format"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <xsl:output method="xml" indent="yes" encoding="UTF-8" 
        doctype-public="-//W3C//DTD SVG 1.1//EN" 
        doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
        media-type="image/svg"/>
    
<xsl:template match="/" >
        <svg:svg  width="800" height="600">
            <svg:script>
                function show(id, id2){
                
                document.getElementById(id).setAttribute('style', 'opacity:0');
                document.getElementById(id2).setAttribute('style', 'opacity:1.0');
                
                
                }
                </svg:script>
           
            
            <xsl:for-each select="/Baza/Koszty/Właściciel">
                <svg:g style="opacity:0.0" >
                    <xsl:attribute name="id" select="@wł_id"/>
                    <xsl:variable name="height1">
                    <xsl:choose>
                        <xsl:when test="number(Suma) eq 0">
                            <xsl:text>0</xsl:text>
                        </xsl:when>
                        <xsl:otherwise>
                            <xsl:value-of select="floor(number(Koszt_części) div number(Suma)*100)"/>                        
                        </xsl:otherwise>
                    </xsl:choose>
                    </xsl:variable>
                    
                    <xsl:variable name="height2">
                        <xsl:choose>
                            <xsl:when test="number(Suma) eq 0">
                                <xsl:text>0</xsl:text>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="floor(number(Koszt_napraw) div number(Suma)*100)"/>                        
                            </xsl:otherwise>
                        </xsl:choose>
                    </xsl:variable>
                    
                    <xsl:variable name="height3">
                        <xsl:choose>
                            <xsl:when test="number(Suma) eq 0">
                                <xsl:text>0</xsl:text>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="floor(number(Koszt_przeglądów) div number(Suma)*100)"/>                        
                            </xsl:otherwise>
                        </xsl:choose>
                    </xsl:variable>
                    
                    
          
                    <svg:rect x="10%" y="{90-$height1 div 2}%" width="20%" height="{$height1 div 2}%" style="fill:#ff0000;">
                        <svg:animate attributeName="y" from="90%" to="{90 - $height1 div 2}%" dur="2" repeatCount="1"/>
                        <svg:animate attributeName="height" from="0" to="{$height1 div 2}%" dur="2" repeatCount="1"/>
                    </svg:rect>
                    <svg:rect x="40%" y="{90-$height2 div 2}%" width="20%" height="{$height2 div 2}%" style="fill:#00ff00;">
                        <svg:animate attributeName="y" from="90%" to="{90 - $height2 div 2}%" dur="2" repeatCount="1"/>
                        <svg:animate attributeName="height" from="0" to="{$height2 div 2}%" dur="2" repeatCount="1"/>
                    </svg:rect>
                    <svg:rect x="70%" y="{90-$height3 div 2}%" width="20%" height="{$height3 div 2}%" style="fill:#100ffd;">
                        <svg:animate attributeName="y" from="90%" to="{90 - $height3 div 2}%" dur="2" repeatCount="1"/>
                        <svg:animate attributeName="height" from="0" to="{$height3 div 2}%" dur="2" repeatCount="1"/>
                    </svg:rect>
                    <svg:text x="10%" y ="10%"><xsl:value-of select="imię_i_nazwisko"/></svg:text>
                    
                    <svg:text x="30%" y="10"><xsl:value-of select="concat(Koszt_napraw,' zł')"></xsl:value-of></svg:text>
                    <svg:text x="30%" y="10"><xsl:value-of select="concat(Koszt_części,' zł')"></xsl:value-of></svg:text>
                    <svg:text x="30%" y="10"><xsl:value-of select="concat(Koszt_przeglądów,' zł')"></xsl:value-of></svg:text>
                   
                    <svg:text x="10%" y="95%" onclick="location.reload();">Koszty napraw</svg:text>
                    <svg:text x="40%" y="95%" onclick="location.reload();">Koszty części</svg:text>
                    <svg:text x="70%" y="95%" onclick="location.reload();">Koszty przeglądów</svg:text>
                   
                   
                </svg:g>
            </xsl:for-each>
            <svg:g id="all" style="opacity:1.0">
                <xsl:apply-templates select="/Baza/Koszty/Właściciel"/>
            </svg:g>
            
        </svg:svg>
    </xsl:template>
    <xsl:template match="/Baza/Koszty/Właściciel">
        <xsl:variable name="x" select="(position() div count(/Baza/Koszty/Właściciel)) *94 "></xsl:variable>
        <xsl:variable name="height" select="floor((Suma) div sum(/Baza/Koszty/Właściciel/Suma)*100)"/>
        
            
        <svg:rect x="{$x}%" y="{80-$height}%" width="6%" height="{$height}%" style="fill:#0000ff;" >
        <svg:animate attributeName="y" from="80%" to="{80 - $height}%" dur="2" repeatCount="1"/>
        <svg:animate attributeName="height" from="0" to="{$height}%" dur="2" repeatCount="1"/>
     
        </svg:rect>
        <svg:text x="{$x}%" y="20%" onclick = "show('all', '{@wł_id}')">Więcej</svg:text>
        <xsl:for-each select="tokenize(imię_i_nazwisko, ' ')">
                <svg:text x="{$x}%" y = "{position()*5}%" ><xsl:value-of select="." /></svg:text>
        </xsl:for-each>
        
        <svg:text x="{$x+2}%" y="87%" ><xsl:value-of select="@wł_id"/></svg:text>
       
       
       
    </xsl:template>
</xsl:stylesheet>